import 'package:flutter/material.dart';
import 'package:flutter_reactive_ble/flutter_reactive_ble.dart';
import 'package:get/get.dart';
import 'package:ty_smart_watch/bean/connected_device_bean.dart';
import 'package:ty_smart_watch/ble/connected_device_controller.dart';
import 'package:ty_smart_watch/db/device_in_db_controller.dart';
import 'package:ty_smart_watch/page/smartlife/controller/connected_device_controller.dart';
import 'package:ty_smart_watch/route/routes.dart';
import 'package:ty_smart_watch/utils/Log.dart';
import 'package:ty_smart_watch/utils/db_util.dart';

import '../../common/images_url.dart';

///首页设备列表
class DeviceList extends StatefulWidget {
  const DeviceList({super.key});

  @override
  State<DeviceList> createState() => _DeviceListState();
}

class _DeviceListState extends State<DeviceList> {
  DeviceController deviceController = Get.find();

  final DeviceInDbController _dbController = Get.put(DeviceInDbController());

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 110,
        margin: const EdgeInsets.fromLTRB(10, 0, 10, 0),
        decoration: const BoxDecoration(
          //圆角半径
          borderRadius: BorderRadius.all(Radius.circular(12.0)),
          //边框线宽、颜色
          // border: Border.all(width: 1.0, color: Colors.blue),
          boxShadow: [
            BoxShadow(color: Colors.grey, offset: Offset(0, 0), blurRadius: 8, spreadRadius: 0),
          ],
          // 线性渐变，分别设置渐变的颜色，起始点
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.white, Color(0xFFE2F6ED)]),
        ),
        child: Obx(
          () => Container(
            margin: const EdgeInsets.symmetric(horizontal: 6),
            child: ListView.builder(
              scrollDirection: Axis.horizontal, // 设置滚动方向为水平
              itemCount: _dbController.deviceList.value.length + 1,
              itemBuilder: (context, index) {
                if (index < _dbController.deviceList.value.length) {
                  final device = _dbController.deviceList.value[index];
                  return GestureDetector(
                    onTap: () {
                      // 在此处添加你希望执行的点击事件处理逻辑
                      print(
                          'Clicked on ${_dbController.deviceList.value[index]['name']}  >>  ${_dbController.deviceList.value[index]['address']}');
                      clickDevice(device);
                    },
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0), // 设置水平间距
                      child: DeviceItem(
                        name: device['name'],
                        // imageUrl: device.imgUrl,
                        imageUrl: ICON_WATHC_STYLE_1,
                        paddingSize: 5,
                      ),
                    ),
                  );
                } else {
                  return GestureDetector(
                    onTap: () {
                      Get.toNamed(Routes.scanDevicePage);
                    },
                    child: Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0), // 设置水平间距
                      child: DeviceItem(
                        name: "添加设备",
                        imageUrl: ADD_ICON,
                        paddingSize: 15,
                      ),
                    ),
                  );
                }
              },
            ),
          ),
        ));
  }
}

//点击设备列表中的设备
void clickDevice(Map<String, dynamic> device) {
  Log.d("点击设备的id： ${device['name']}");
}

//设备选择组件
class DeviceItem extends StatelessWidget {
  DeviceItem({super.key, required this.name, required this.imageUrl, required this.paddingSize});

  final double paddingSize;
  final String name;
  final String imageUrl;

  DbUtil dbUtil = DbUtil();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Container(
          padding: EdgeInsets.all(paddingSize),
          margin: const EdgeInsets.fromLTRB(0, 10, 0, 2),
          width: 60,
          height: 60,
          decoration: const BoxDecoration(
              shape: BoxShape.circle, color: Color.fromARGB(255, 219, 243, 251)),
          child: Container(
            margin: const EdgeInsets.all(6),
            child: ClipOval(child: Image.asset(imageUrl)),
          ),
        ),
        Container(
            margin: const EdgeInsets.fromLTRB(0, 0, 0, 10),
            child: Text(name, style: const TextStyle(fontSize: 14, color: Colors.grey))),
      ],
    );
  }
}
